<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">充值记录</text>
			<text class="page-subtitle">查看所有充值申请记录</text>
		</view>

		<!-- 统计信息 -->
		<view class="stats-card">
			<view class="stat-item">
				<text class="stat-number">{{ totalRecords }}</text>
				<text class="stat-label">总申请数</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ pendingRecords }}</text>
				<text class="stat-label">处理中</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ successRecords }}</text>
				<text class="stat-label">已完成</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">¥{{ totalAmount }}</text>
				<text class="stat-label">总金额</text>
			</view>
		</view>

		<!-- 筛选器 -->
		<view class="filter-section">
			<view class="filter-tabs">
				<view 
					class="filter-tab" 
					:class="{ active: currentFilter === 'all' }"
					@click="setFilter('all')"
				>
					<text class="tab-text">全部</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: currentFilter === 'pending' }"
					@click="setFilter('pending')"
				>
					<text class="tab-text">处理中</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: currentFilter === 'success' }"
					@click="setFilter('success')"
				>
					<text class="tab-text">已完成</text>
				</view>
			</view>
		</view>

		<!-- 记录列表 -->
		<view class="records-list">
			<view v-if="filteredRecords.length === 0" class="empty-state">
				<text class="empty-icon">📋</text>
				<text class="empty-title">暂无记录</text>
				<text class="empty-desc">还没有充值申请记录</text>
			</view>
			
			<view v-else>
				<view class="record-item" v-for="item in filteredRecords" :key="item.id">
					<view class="record-header">
						<view class="record-amount">
							<text class="amount-text">¥{{ item.amount }}</text>
							<view class="status-badge" :class="item.status">
								<text class="status-text">{{ getStatusText(item.status) }}</text>
							</view>
						</view>
						<text class="record-time">{{ item.time }}</text>
					</view>
					
					<view class="record-details">
						<view class="detail-row">
							<text class="detail-label">申请编号</text>
							<text class="detail-value">#{{ item.id }}</text>
						</view>
						<view class="detail-row" v-if="item.notes">
							<text class="detail-label">备注信息</text>
							<text class="detail-value">{{ item.notes }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">预计课时</text>
							<text class="detail-value">约{{ Math.floor(item.amount / 20) }}课时</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作 -->
		<view class="bottom-actions">
			<button class="refresh-btn" @click="refreshRecords">
				<text class="btn-text">刷新记录</text>
			</button>
			<button class="back-btn" @click="goBack">
				<text class="btn-text">返回</text>
			</button>
		</view>
	</view>
</template>

<script>
import { API_CONFIG, getApiUrl, apiRequest } from '@/config/api.js'

export default {
	data() {
		return {
			rechargeRecords: [],
			currentFilter: 'all',
			loading: false
		}
	},
	computed: {
		filteredRecords() {
			if (this.currentFilter === 'all') {
				return this.rechargeRecords
			}
			return this.rechargeRecords.filter(record => record.status === this.currentFilter)
		},
		
		totalRecords() {
			return this.rechargeRecords.length
		},
		
		pendingRecords() {
			return this.rechargeRecords.filter(record => record.status === 'pending').length
		},
		
		successRecords() {
			return this.rechargeRecords.filter(record => record.status === 'success').length
		},
		
		totalAmount() {
			return this.rechargeRecords.reduce((sum, record) => sum + (record.amount || 0), 0)
		}
	},
	async onLoad() {
		await this.loadRechargeRecords()
	},
	onPullDownRefresh() {
		this.refreshRecords()
	},
	methods: {
		async loadRechargeRecords() {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return
			}
			
			this.loading = true
			try {
				const response = await apiRequest({
					url: getApiUrl('/api/student-class-hours/myRechargeRecords'),
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})

				if (response.code === 200) {
					this.rechargeRecords = (response.data || []).map(record => ({
						id: record.id,
						title: `${record.amount}元充值申请`,
						time: this.formatTime(record.rechargeTime),
						amount: record.amount,
						notes: record.notes,
						status: record.isProcessed === 1 ? 'success' : 'pending'
					}))
				}
			} catch (error) {
				console.error('加载充值记录失败:', error)
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		formatTime(timeString) {
			if (!timeString) return ''
			const date = new Date(timeString)
			return date.toLocaleString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit',
				hour: '2-digit',
				minute: '2-digit'
			})
		},

		setFilter(filter) {
			this.currentFilter = filter
		},

		async refreshRecords() {
			await this.loadRechargeRecords()
			uni.stopPullDownRefresh()
			uni.showToast({
				title: '刷新成功',
				icon: 'success'
			})
		},

		goBack() {
			uni.navigateBack()
		},

		getStatusText(status) {
			const statusMap = {
				'success': '已完成',
				'pending': '处理中',
				'failed': '失败'
			}
			return statusMap[status] || status
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #0B0F1A 0%, #1a1f2e 100%);
	padding-bottom: 120rpx;
}

.page-header {
	padding: 40rpx 30rpx 30rpx;
	text-align: center;
	
	.page-title {
		display: block;
		font-size: 40rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-bottom: 12rpx;
	}
	
	.page-subtitle {
		font-size: 24rpx;
		color: #AAB4BE;
	}
}

.stats-card {
	margin: 20rpx;
	padding: 30rpx;
	background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
	border-radius: 20rpx;
	display: flex;
	justify-content: space-around;
	box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.3);
	
	.stat-item {
		text-align: center;
		
		.stat-number {
			display: block;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 8rpx;
		}
		
		.stat-label {
			font-size: 20rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}
}

.filter-section {
	margin: 20rpx;
	
	.filter-tabs {
		display: flex;
		background: #1a1f2e;
		border-radius: 16rpx;
		padding: 8rpx;
		border: 1rpx solid #2a2f3e;
		
		.filter-tab {
			flex: 1;
			text-align: center;
			padding: 20rpx 16rpx;
			border-radius: 12rpx;
			transition: all 0.3s ease;
			
			&.active {
				background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
				
				.tab-text {
					color: #FFFFFF;
					font-weight: bold;
				}
			}
			
			.tab-text {
				font-size: 28rpx;
				color: #AAB4BE;
			}
		}
	}
}

.records-list {
	margin: 20rpx;
	
	.empty-state {
		text-align: center;
		padding: 100rpx 40rpx;
		
		.empty-icon {
			display: block;
			font-size: 80rpx;
			margin-bottom: 20rpx;
		}
		
		.empty-title {
			display: block;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 12rpx;
		}
		
		.empty-desc {
			font-size: 24rpx;
			color: #AAB4BE;
		}
	}
}

.record-item {
	background: #1a1f2e;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border: 1rpx solid #2a2f3e;
	
	.record-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
		
		.record-amount {
			display: flex;
			align-items: center;
			gap: 20rpx;
			
			.amount-text {
				font-size: 36rpx;
				color: #00B8D4;
				font-weight: bold;
			}
			
			.status-badge {
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				
				&.pending {
					background: rgba(240, 173, 78, 0.2);
					
					.status-text {
						color: #f0ad4e;
					}
				}
				
				&.success {
					background: rgba(76, 217, 100, 0.2);
					
					.status-text {
						color: #4cd964;
					}
				}
				
				&.failed {
					background: rgba(244, 67, 54, 0.2);
					
					.status-text {
						color: #f44336;
					}
				}
				
				.status-text {
					font-size: 22rpx;
					font-weight: 500;
				}
			}
		}
		
		.record-time {
			font-size: 24rpx;
			color: #AAB4BE;
		}
	}
	
	.record-details {
		.detail-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.detail-label {
				font-size: 26rpx;
				color: #AAB4BE;
			}
			
			.detail-value {
				font-size: 26rpx;
				color: #FFFFFF;
				font-weight: 500;
			}
		}
	}
}

.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	background: #0B0F1A;
	border-top: 1rpx solid #2a2f3e;
	display: flex;
	gap: 20rpx;
	
	.refresh-btn, .back-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		border: none;
		
		.btn-text {
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: 500;
		}
	}
	
	.refresh-btn {
		background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
	}
	
	.back-btn {
		background: #2a2f3e;
	}
}
</style> 